<script setup lang="ts">

import UserInfo from "@/components/common/UserInfo.vue";
import {onMounted} from "vue";

onMounted(()=>{
  document
        .querySelector('body')
        ?.setAttribute('style', 'background-color:var(--background-color);')
})

</script>

<template>
  <div class="card-container" style="display:flex; justify-content: center; margin: 0;padding: 100px 0">
      <el-card style="width: 70%; border-radius: 10px" class="dark-card" shadow="always">
        <user-info></user-info>
      </el-card>
  </div>
</template>

<style scoped lang="stylus">
.card-container{
  //background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #3b4a5c 100%);
}
.dark-card{
  //background: linear-gradient(55deg, #34495e 0%, #2c3e50 50%, #2980b9 100%);
  min-height: 700px;
}
</style>